<template>
  <div class="app-container">
    <div class="filter-container">

      <div  class="filter-item">
        <el-cascader placeholder="分类"
          v-model="selectClassifyId"
          :options="classifies"
          :props="{ expandTrigger: 'hover' ,value:'id',label:'name'}"
        @change="getSpecLst"
        ></el-cascader>
      </div>

<!--      <el-button @click="getSpecLst" type="primary" class="filter-item">查询</el-button>-->
      <el-button @click="addSpec" type="primary" class="filter-item">添加</el-button>
      <el-button @click="reload" type="danger" class="filter-item">刷新</el-button>

      <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      v-horizontal-scroll="'always'"
      >
    <el-table-column  type="selection"  min-width="55" />
    <el-table-column prop="id" label="ID" min-width="80" />
    <el-table-column prop="get_classify.name" label="分类" min-width="120" />
    <el-table-column prop="name" label="规格名" min-width="120" />
    <el-table-column prop="spec_values" label="规格值" min-width="550" />
    <el-table-column prop="created_at" label="创建时间" min-width="160" />
    <el-table-column fixed="right" label="操作" min-width="100">
      <template slot-scope="scope">
      <el-button  size="mini" type="text"  @click="editSpec(scope.row.id)">编辑</el-button>
			<!-- <el-button	size="mini"	type="danger"	@click="delSpec(scope.row.id)">删除</el-button> -->
		</template>
    </el-table-column>
    </el-table>

      <el-dialog :title="isAdd?'添加':'编辑'" :visible.sync="dialogFormVisible">
        <el-form  :model="form" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
          <el-form-item  label="规格名">
            <span>{{classifyName}}</span>
          </el-form-item>

          <el-form-item  label="规格名">
            <el-input class="myInput" v-model="form.spec_name"></el-input>
          </el-form-item>
          <el-form-item  v-for="(item, index) in form.spec_values" :label="'规格值' + index" :key="index">
            <el-input style="margin-right: 10px" class="myInput" v-model="item.name"></el-input>
            <!-- <el-button v-show="isAdd" @click.prevent="removeSpecValue(index)">删除</el-button> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="addSpecValue">添加规格值</el-button>
<!--            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>-->
          </el-form-item>
        </el-form>
      </el-dialog>




    </div>

  </div>
</template>

<script>
import { myGet, myPost } from '@/utils/myUtils';
const urlClassifyDetail = '/guard/shop/goods/classify/detail'
const urlSpecLst = '/guard/shop/goods/spec/lst'
const urlSpecAdd = '/guard/shop/goods/spec/add'
const urlSpecDetail = '/guard/shop/goods/spec/detail'
const urlSpecDel = '/guard/shop/goods/spec/del'
export default {

  data() {
    return {
      classifyProps:{value:'id',label:'value'},
      classifies:[],
      selectClassifyId:[0],
      list:[],
      listLoading:true,
      isAdd:true,
      dialogFormVisible:false,
      classifyName:'',
      form:{
        classify_id:0,
        spec_id:0,
        spec_name:'',
        spec_values:[{
          name:'',
        }]
      },
    };
  },

  mounted() {
    this.getSpecLst()
  },

  methods: {
    onSubmit(){
      myPost(urlSpecAdd,this.form).then(res=>{
        if(res.status){
          this.dialogFormVisible = false
          this.$message.success(res.msg)
          this.getSpecLst()

        }
      })
    },

    /* removeSpecValue(index){
      this.form.spec_values.splice(index,1)
    }, */
    addSpecValue(){
        this.form.spec_values.push({
          name:''
        })
    },

    addSpec(){
      if(this.selectClassifyId.length<=0){
        this.$message.error("亲，请先选择分类")
        return
      }
      const id = this.selectClassifyId[this.selectClassifyId.length-1]
      this.form.classify_id = id
      myGet(urlClassifyDetail,{id}).then(res=>{
        if(res.status){
          this.classifyName = res.data.records[0].name
          this.isAdd = true
          this.dialogFormVisible = true
        }
      })
    },

    editSpec(id){
      myGet(urlSpecDetail,{id}).then(res=>{

        if(res.status){
          const info = res.data.records[0]
          this.classifyName = info.get_classify.name,
          this.$set(this.form,'classify_id',info.get_classify.id)
          this.$set(this.form,'spec_id',info.id)
          this.$set(this.form,'spec_name',info.name)
          this.$set(this.form,'spec_values',info.get_spec_value)

          this.form.spec_values.push({
            name:''
          })

          this.isAdd = false
          this.dialogFormVisible = true
        }

      })

    },

    /* delSpec(id){
      myGet(urlSpecDel,{id}).then(res=>{
        if(res.status){
          this.$message.success(res.msg)
        }
      })
    }, */


    reload(){
      this.getSpecLst()
    },
    getSpecLst(){
      this.listLoading = true
      let params = {}
      if(this.selectClassifyId.length>0){
        params = {
          selectClassifyId:this.selectClassifyId[this.selectClassifyId.length-1]
        }
      }

      myGet(urlSpecLst,params).then(res=>{
        this.listLoading = false
        if(res.status){
          this.list = res.data.records
          this.classifies = res.data.classifies
        }
      })
    },



  },
};
</script>

<style  scoped>

.myInput{
  width: 247px;
}

</style>
